<template>
<div class="oe-ruleManage" v-loading="loading">
    <top-tip :batchTitle="batchTitle" :examTitle="examTitle"></top-tip>
    <div class="oe-rule-content">
        <div class="oe-manage-search">
            <span class="oe-manage-text"></span>
            <span class="oe-manage-input">
                <a-input-search :allowClear="true" @pressEnter="getCutScreenList()" @search="getCutScreenList()" v-model="searchStu" placeholder="输入姓名或者学号查询" />
            </span>

        </div>
        <div class="oe-manage-contain">
            <a-table :columns="modalColumns" :dataSource="modalList" :rowSelection="modalSelection" :pagination="modalPagination" :scroll="{ y: 470 }" @change="onModalChange">
                <span slot="Action" slot-scope="record">
                    <a-tooltip placement="bottom" title="查看详情">
                        <span class="iconfont icon-chakan" style="color:#1890ff;cursor: pointer;" @click.stop="showDetail(record)"></span>
                    </a-tooltip>
                </span>
            </a-table>
        </div>
    </div>
    <!-- 切屏详情 -->
    <a-modal v-model="visibleCutPage" title="异常详情" width="800px" wrapClassName="oe-modal__manage" :afterClose="colseStuCut">
        <div class="oe-modal-table">
            <div class="student-detail-item">考生姓名：{{ stuInfo.DisplayName }}</div>
            <div class="student-detail-item">考生学号：{{ stuInfo.UserNo }}</div>
            <a-table :columns="modalCutPageColumns" :dataSource="modalCutPageList" :pagination="modalStuCutPagination" @change="onModalChangeStuCut" :scroll="{ y: 470 }" v-pic>
                <span slot="Url" slot-scope="text, record">
                    <img v-if="record.CutType == '移开摄像头'" :src="record.Url" :alt="record.DateCreated" :title="record.DateCreated" />
                    <span v-else>---- ----</span>
                </span>
            </a-table>
        </div>
        <template slot="footer">
            <a-button class="oe-btn-delete" @click.stop="colseStuCut">关闭</a-button>
        </template>
    </a-modal>
</div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
    name: 'cutScreenDetails',
    components: {
        topTip
    },
    mixins: [GetOperationList],
    data() {
        return {
            searchStu:"",
            //数据详情
            stuAnswerList: [],
            // 分页配置
            modalPagination: {
                pageSizeOptions: ['10', '20', '50', '100', '1000'],
                showSizeChanger: true,
                showTotal(total) {
                    return `共 ${total} 条`;
                },
                onShowSizeChange: (current, pageSize) => {
                    this.modalPagination.current = current;
                    this.modalPagination.pageSize = pageSize;
                },
                onChange: (current, pageSize) => {
                    this.modalPagination.current = current;
                    this.modalPagination.pageSize = pageSize;
                },
                buildOptionText(props) {
                    return props.value + '条/页';
                },
                current: 1,
                pageSize: 10,
                total: 0
            },
            modalColumns: [{
                    title: '序号',
                    dataIndex: 'number',
                    key: 'number'
                },
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                    // sorter: true
                },
                {
                    title: '学号',
                    dataIndex: 'stuNumber',
                    key: 'stuNumber',
                    // sorter: true
                },

                {
                    title: '切屏数',
                    dataIndex: 'cutPageCount',
                    key: 'cutPageCount',
                    // sorter: true,
                    align: 'center'
                },
                {
                    title: '摄像头数 ',
                    dataIndex: 'cameraCutPageCount',
                    key: 'cameraCutPageCount',

                    // sorter: true,
                    align: 'center'
                },
                {
                    title: '切屏加摄像头总数',
                    dataIndex: 'cutPageAllCount',
                    key: 'cutPageAllCount',
                    // sorter: true,
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'Action',
                    scopedSlots: {
                        customRender: 'Action'
                    },
                    align: 'center'
                }
            ],
            modalList: [],
            //切屏详情
            visibleCutPage: false,
            stuInfo: {},
            modalCutPageColumns: [{
                    title: '序号',
                    dataIndex: 'number',
                    key: 'number'
                },
                {
                    title: '类型',
                    dataIndex: 'CutType',
                    key: 'CutType'
                },
                {
                    title: '时间',
                    dataIndex: 'DateCreated',
                    key: 'DateCreated'
                },
                {
                    title: '异常截图',
                    dataIndex: 'Url',
                    width: '40%',
                    key: 'Url',
                    scopedSlots: {
                        customRender: 'Url'
                    }
                }
            ],
            modalCutPageList: [],
            //学生详情分页配置
            modalStuCutPagination: {
                pageSizeOptions: ['10', '20', '50', '100', '1000'],
                showSizeChanger: true,
                showTotal(total) {
                    return `共 ${total} 条`;
                },
                onShowSizeChange: (current, pageSize) => {
                    this.modalStuCutPagination.current = current;
                    this.modalStuCutPagination.pageSize = pageSize;
                },
                onChange: (current, pageSize) => {
                    this.modalStuCutPagination.current = current;
                    this.modalStuCutPagination.pageSize = pageSize;
                },
                buildOptionText(props) {
                    return props.value + '条/页';
                },
                current: 1,
                pageSize: 10,
                total: 0
            },
            stuId: "",
            examTitle: "",
            batchTitle: "",
        };
    },
    props: {
        examid: {
            type: String,
            default: ''
        }
    },
    mounted(){
        this.getCutScreenList();
        this.getOperation();
    },
    methods: {
        getOperation() {
          this.loading = true;
          this.GetOperationList('examId',this.examid).then((rst) => {
            this.loading = false;
            if (rst.code === 1) {
              this.examTitle = rst.examTitle
              this.batchTitle = rst.batchTitle
            } else {
              this.$message.error(rst.msg);
            }
          });
        },
        colseStuCut(){
            this.visibleCutPage = false;
            this.modalStuCutPagination.pageSize = 10;
            this.modalStuCutPagination.current = 1;
        },
        //数据统计详情
        getCutScreenList(current, pageSize, sort) {
            this.loading = true;
            var that = this;
            this.$http
                .post('/api/examStatistics/ExamAnaly/getCutScreenList', {
                    examId: this.examid,
                    pageSize: pageSize || 10,
                    page: current || 1,
                    searchStu:this.searchStu
                })
                .then((rst) => {
                    this.loading = false;
                    if (rst.code > 0) {
                        this.stuAnswerList = rst.list;

                        this.modalList = [];
                        this.modalPagination.current = rst.pagination.pageIndex;
                        this.modalPagination.pageSize = rst.pagination.pageSize;
                        this.modalPagination.total = rst.pagination.totalCount;
                        if (rst.list.length) {
                            rst.list.forEach((item, index) => {
                                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                                this.modalList.push({
                                    ...item,
                                    number: number
                                });
                            });
                        }
                    } else {
                        that.$message.warning(rst.msg);
                    }
                });
        },
        //单个学生切屏详情
        getStuCutPageList() {
            var that = this;
            this.$http
                .post('/api/examStatistics/ExamAnaly/getStuCutPageList', {
                    stuId: this.stuId,
                    examId: this.examid,
                    pageSize: this.modalStuCutPagination.pageSize || 10,
                    page:  this.modalStuCutPagination.current || 1
                })
                .then((rst) => {
                    if (rst.code > 0) {
                        this.visibleCutPage = true;
                        this.modalCutPageList = [];
                        this.modalStuCutPagination.current = rst.pagination.pageIndex;
                        this.modalStuCutPagination.pageSize = rst.pagination.pageSize;
                        this.modalStuCutPagination.total = rst.pagination.totalCount;

                        if (rst.list.length) {
                            rst.list.forEach((item, index) => {
                                this.stuInfo = rst.StuInfo;
                                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                                this.modalCutPageList.push({
                                    ...item,
                                    number: number
                                });
                            });
                        }
                    } else {
                        that.$message.warning(rst.msg);
                    }
                });
        },
        // 点击table排序
        onModalChange(pagenation, filter, sort) {
            let sortOrder = '';
            if (sort.order) {
                if (sort.order == 'ascend') {
                    sortOrder = sort.columnKey;
                } else if (sort.order == 'descend') {
                    sortOrder = '-' + sort.columnKey;
                } else {
                    sortOrder = '';
                }
            }

            this.getCutScreenList(pagenation.current, pagenation.pageSize, sortOrder);
        },
        onModalChangeStuCut(pagenation){
            this.modalStuCutPagination.pageSize = pagenation.pageSize;
            this.modalStuCutPagination.current = pagenation.current;
            this.getStuCutPageList();
        },

        showDetail(r) {
           this.stuId = r.id;
           this.getStuCutPageList();
        }
    },
};
</script>
